<template>
	<div class="view">
		<Modal v-model="data.modalShow" :mask-closable="false">
			<p slot="header">
				<span>{{data.actionType == 1 ? '新建' : '编辑'}}账户</span>
			</p>
			<div style="padding: 10px;">
				<Form ref="form" :model="data.data" :rules="ruleValidate" :label-width="100">
					<FormItem label="账户" prop="account">
						<Input v-if="data.actionType == 1" v-model="data.data.account" placeholder="请输入账户 1-24字符" :maxlength="24" />
						<Input v-if="data.actionType == 2" v-model="data.data.account" placeholder="请输入账户 1-24字符" :maxlength="24" disabled />
					</FormItem>
					<FormItem label="密码" prop="password">
						<Input v-model="data.data.password" placeholder="请输入密码 1-24字符" :maxlength="24" type="password"/>
					</FormItem>
					<FormItem label="确认密码" prop="confirmPwd">
						<Input v-model="data.data.confirmPwd" placeholder="请重新输入密码 1-24字符" :maxlength="24" type="password"/>
					</FormItem>
				</Form>
			</div>
			<div slot="footer">
				<Button
					type="primary"
					size="large"
					:loading="data.isSubmitLoading"
					@click="handleSubmit()">
					{{data.actionType == 1 ? '新建' : '编辑'}}
				</Button>
			</div>
		</Modal>
	</div>
</template>

<script>
export default {
	props: ['data'],
	data () {
		return {
			ruleValidate: {
				account: [
					{ required: true, message: '账户不能为空', trigger: 'blur' }
				],
				password: [
					{ required: true, message: '密码不能为空', trigger: 'blur' }
				],
				confirmPwd: [
					{ required: true, message: '确认密码不能为空', trigger: 'blur' }
				],
			}
		}
	},
	mounted() {
	},
	methods: {
		handleSubmit () {
			this.$refs['form'].validate((valid) => {
				if (valid) {
					this.$emit('on-submit-action', this.data);
				} else {
					this.$Message.error('表单验证失败!');
				}
			})
		}
	}
}
</script>

<style scoped lang="less">
.view {
	
}
</style>
